<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> svg使用 </title>
		<style type="text/css">
			.red {
			  fill: red;
			}
			 
			.fancy {
			  fill: none;
			  stroke: black;
			  stroke-width: 3pt;
			}
		</style>
	</head>
	<body>
		 <!--
		 	svg基于xml语法的图像格式 （可缩放矢量图） 
		 	其他图像格式都是基于像素处理的  svg则是属性对图像的形状描述  本质上是文本文件 
		 	体积小 不论放大缩小几倍 不会失真    
		 -->
		 
		 
		 <!-- SVG 代码直接插入网页的例子-->
		 <!--<svg
			  id="mysvg"
			  xmlns="http://www.w3.org/2000/svg"
			  viewBox="0 0 800 600"
			  preserveAspectRatio="xMidYMid meet"
			>
			  <circle id="mycircle" cx="400" cy="300" r="50" />-->
		 
		 
		 <!--SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页-->
		    <!--<img src="circle.svg">
			<object id="object" data="circle.svg" type="image/svg+xml"></object>
			<embed id="embed" src="icon.svg" type="image/svg+xml">
			<iframe id="iframe" src="icon.svg"></iframe>-->
		 
		 
		 
		<!--语法 -->
			<!--svg代码都放在顶层的<svg>之中-->
			<svg width="100%" height="100%">
				<circle id="mycircle" cx="50" cy="50" r="50"/>
			</svg>	
			<!--<svg>的width和height属性 指定svg图形 在html中的大小 除了相对单位 还可以采用绝对单位 
				如果没有指定这两个属性  svg默认为300wpx  150hpx
			-->
		
		 
		 	<!--如果只是想展示svg图像的一部分 就要指定viewBox属性 -->
		 	<svg width="100" height="100" viewBox="50 50 50 50">
			  <circle id="mycircle" cx="50" cy="50" r="50" />
			</svg>
			<!--wiewBox属性的值四个数字    左上角横坐标 纵坐标 视口的宽度和高度   4/1圆-->			 
		    
		 	
		 	<!--<crecle> 标签圆-->
			<svg width="300" height="180">
			  <circle cx="30"  cy="50" r="25" />
			  <circle cx="90"  cy="50" r="25" class="red" />
			  <circle cx="150" cy="50" r="25" class="fancy" />
			</svg>	 
			<!--定义了3个圆   cx cy r属性  横坐标 纵坐标  半径 单位像素
				坐标都是 相对于 svg画布的 左上角原点 
				SVG 的 CSS 属性与网页元素有所不同。
				fill：    填充色
				stroke：描边色
				stroke-width：边框宽度				
			-->
			
			
			<!--<line>标签用来绘制直线-->
			<svg width="300" height="180">
			  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
			</svg>
			<!--，<line>标签的x1属性和y1属性，表示线段起点 的横坐标和纵坐标；x2属性和y2属性，表示线段终点 的横坐标和纵坐标；					
			      style属性表示线段的样式。
			-->
			  
			
			
			<!--<polyline>标签用于绘制一根折线。-->
			<svg width="300" height="180">
			  <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
			</svg>
			<!--<polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。-->
			
			
		 
		 	<!--<rect>标签用于绘制矩形。-->
		 	<svg width="300" height="180">
			  <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
			</svg>
			<!--<rect>的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。-->
				
				
			<!--<ellipse>标签用于绘制椭圆。-->	
			<svg width="300" height="180">
			  <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
			</svg>	
			<!--<ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。-->
				
				
			<!--<polygon>标签用于绘制多边形。-->	
			<svg width="300" height="180">
			  <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
			</svg>
			<!--<polygon>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。-->
				
				
			<!--<path>标签用于制路径。-->	
				<svg width="300" height="180">
					<path d="
					  M 18,3
					  L 46,3
					  L 46,40
					  L 61,40
					  L 32,68
					  L 3,40
					  L 18,40
					  Z
					"></path>
					</svg>
			<!--<path>的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。 M：移动到（moveto）L：画直线到（lineto）Z：闭合路径-->		
	
	
			<!--<text>标签用于绘制文本。-->				
			<svg width="300" height="180">
			  <text x="50" y="25">Hello World</text>
			</svg>
			<!--<text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。-->
		
		
			<!--//https://blog.csdn.net/weixin_41646716/article/details/89335639-->
	<body/>

</html>
